<template>
	<view class="history">
		<text class="history-title">历史计划都在这哦～</text>
		<view class="date-range">
			<picker mode="date" :value="startTime === '' ? moment : startTime" @change="handleStartDate">
				<view class="picker">{{startTime === '' ? moment : startTime}}</view>
			</picker>
			<text>至</text>
			<picker mode="date" :value="endTime === '' ? moment : endTime"  @change="handleEndDate">
				<view class="picker">{{endTime === '' ? moment : endTime}}</view>
			</picker>
			<button class="cu-btn bg-blue" @click="reset">重置</button>
		</view>
		<view class="list">
			<scroll-view scroll-y enable-back-to-top style="height: 100%;">
				<view v-for="(item, index) in historyList1" :key="index" class="list-item">
					<view class="top">
						<text class="title">{{item.title}}</text>
						<view class="top-right">
							<text style="margin-right: 20rpx; font-weight: bold;" :class="item.state === '1' ? 'green' : 'red'">{{item.state === '1' ? '已完成' : '未完成'}}</text>
							<text style="color: #ccc;">{{item.date}}</text>
						</view>
					</view>
					<view class="content">
						{{item.content}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import moment from 'moment'
// import {mapState} from 'vuex'

import {getRequest} from '../../https.js'
export default{
	data() {
		return {
			historyList: [],
			historyList1: [],
			startTime: '',
			endTime: '',
			moment: moment().format('YYYY-MM-DD')
		}
	},
	mounted() {
		this.getHistoryList()
	},
	onShow() {
		this.getHistoryList()
	},
	watch: {
		startTime(newVal, oldVal){
			this.resList(newVal, this.endTime)
		},
		endTime(newVal, oldVal){
			this.resList(this.startTime, newVal)
		}
	},
	methods: {
		getHistoryList(){
			getRequest( 'phpbin/tomorrowplan/getPlanList.php').then(res => {
				let list = res.data.content.list
				let _list = list.sort((a, b) => {
					return new Date(b.date) - new Date(a.date)
				})
				this.historyList = _list
				this.historyList1 = _list
			})
		},
		reset(){
			this.startTime = ''
			this.endTime = ''
			this.historyList1 = this.historyList
		},
		handleStartDate(e){
			this.startTime = e.target.value
		},
		handleEndDate(e){
			this.endTime = e.target.value
		},
		resList(startTime, endTime){
			this.historyList1 = this.historyList.filter(item => {
				if (startTime === '' || endTime === '') {
					return true
				}
					
				let start = new Date(startTime).getTime()
				let end = new Date(endTime).getTime()
				let current = new Date(item.date).getTime()
					
				if (current >= start && current <= end) {
					return true
				}else{
					return false
				}
			})
		}
	},
}
</script>

<style lang="scss">
.history{
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-top: 20rpx;
	.history-title{
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		color: $uni-color-primary;
		margin: 30rpx 0;
	}
	.date-range{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.picker{
			border: 1px solid #ccc;
			padding: 16rpx 26rpx;
			border-radius: 8rpx;
		}
	}
	.list{
		height: calc(100% - 200rpx);
		.list-item{
			margin-bottom: 30rpx;
			padding: 20rpx;
			background-color: rgb(253, 246, 236);
			border-radius: 10rpx;
			.top{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px dashed #999;
				padding: 10rpx 0;
				.title{
					font-size: 14px;
					font-weight: bold;
				}
				.top-right{
					margin-left: 20rpx;
					white-space: nowrap;
					.green{
						color: $uni-color-success;
					}
					.red{
						color: $uni-color-error;
					}
				}
			}
			.content{
				padding: 10rpx 0;
			}
		}
	}
}
</style>
